<template>
  <div class="zoom" style="width: 80px; height: 80px" ref="hygrometer"></div>
</template>
<script>
import "echarts-liquidfill"
export default {
  data() {
    return {}
  },
  props: {
    color: {
      type: String,
      default: "",
    },
    num: {
      type: Number,
      default: 0.6,
    },
    unit: {
      type: String,
      default: "",
    },
  },
  mounted() {
    this.drawLiquidfill()
  },
  methods: {
    drawLiquidfill() {
      // 基于准备好的dom，初始化echarts实例
      let hygrometer = this.$echarts.init(this.$refs.hygrometer)
      // 使用指定的配置项和数据显示图表
      hygrometer.setOption({
        title: {
          text: this.unit,
          left: "center",
          bottom: 10,
          textStyle: {
            color: "#ffffff",
            fontWeight: "400",
            fontSize: 12,
          },
        },
        series: [
          {
            type: "liquidFill",
            radius: "80px",
            label: {
              normal: {
                color: "#ffffff",
                insideColor: "#ffffff",
                textStyle: {
                  fontSize: 20,
                  fontWeight: "bold",
                },
              },
            },
            backgroundStyle: {
              color: "rgba(0,0,0,0)", // 修改背景颜色
              borderWidth: 1, // 修改背景边框宽度
              borderColor: "green", // 修改背景边框的颜色
            },
            color: [
              {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: [this.color], // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: [this.color], // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            ],
            data: [
              this.num,
              this.num - 0.05,
              {
                // 如果只想给其中某一个波浪，比如最后一个波浪设置透明度以及鼠标移入的透明度
                value: 0.4,
                itemStyle: {
                  opacity: 0.6,
                },
                emphasis: {
                  itemStyle: {
                    opacity: 0.9,
                  },
                },
              },
            ],
            outline: {
              show: false,
              borderDistance: 0,
              itemStyle: {
                borderColor: this.color,
                borderWidth: 0,
              },
            },
          },
        ],
      })
    },
  },
}
</script>
<style lang="scss" scoped></style>
